@use "scss/colors";
@use "scss/variables";

$cell-height: 28px;
$header-group-padding: 29px; // 15 + 15 + 25/2 (half width stream switch) - 28/2 (half width source icon)
$cell-ends-padding: 34px; // 15 + 15 + 25/2 (half width stream switch) - 17/2 (half width field switch)
$cell-padding: 25px;
$cell-fixed-width: 100px;
$arrow-cell-fixed-width: 40px;

.customTableStyle {
  td {
    border-bottom-color: colors.$grey-50;
  }
}

.headerGroupCell {
  &.light {
    height: 58px;
    color: colors.$dark-blue;
    font-weight: 700;
    font-size: 16px;
    line-height: $cell-height;
    text-transform: capitalize;
    background-color: colors.$foreground;
  }

  &:first-child {
    padding-left: $header-group-padding;
    border-radius: 0;
  }

  &:last-child {
    padding-right: $header-group-padding;
  }

  &:not(:first-child) {
    padding-left: 0;
  }
}

.headerCell {
  color: colors.$grey;
  height: $cell-height;
  font-weight: 400;
  font-size: variables.$font-size-sm;
  line-height: 1.2;
  text-transform: capitalize;

  &:first-child {
    padding-left: $cell-ends-padding;
    border-radius: 0;
  }

  &:not(:first-child) {
    padding-left: 0;
    border-radius: 0;
  }
}

%bodyCell {
  height: $cell-height;
  padding: 0 $cell-padding 0 0;

  &:first-child {
    padding-left: $cell-ends-padding;
    border-radius: 0;
  }

  &:last-child {
    padding-right: $cell-ends-padding;
  }
}

.textCell {
  @extend %bodyCell;

  color: colors.$dark-blue;
  max-width: 0;
  min-width: 140px;
}

.dataTypeCell {
  @extend %bodyCell;

  width: $cell-fixed-width;
  color: colors.$grey-400;
}

.cursorCell {
  padding: 0;
  width: $cell-fixed-width;
}

.pkCell {
  @extend %bodyCell;

  width: $cell-fixed-width;
}

.arrowCell {
  @extend %bodyCell;

  width: $arrow-cell-fixed-width;

  svg {
    color: colors.$grey-200;
  }
}

.columnSelectionSwitchContainer {
  width: variables.$spacing-lg + variables.$spacing-xs;
}
